<template>
	<view class="template-product tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>
		<block v-if="tagList.length>0">
			<swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="5000"
				@change="cardSwiper">
				<swiper-item v-for="(item,index) in tagList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item image-banner">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="indication">
				<block v-for="(item,index) in tagList" :key="index">
					<view class="spot" :class="cardCur==index?'active':''"></view>
				</block>
			</view>
			<!-- 边距间隔 -->
		</block>

		<view class="tn-margin" v-if="tagList.length>0">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					邀约详情
				</view>
				<view class="justify-content-item " v-if="body.faqiren==1">
				<tn-tag @click="editshow=true" shape="circle"
											backgroundColor="tn-main-gradient-aquablue--light"  height="34rpx" width="120rpx">
											编辑详情
				</tn-tag>
				
				<tn-tag  @click="del()" shape="circle"
											backgroundColor="tn-main-gradient-red--light"  height="34rpx" width="120rpx">
											删除组局
				</tn-tag>
				
								</view>
			</view>
		</view>

		<view class="tn-margin" :style="{paddingTop: vuex_custom_bar_height + 'px'}" v-else>
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-bold tn-text-xl">
					邀约详情
				</view>
				<view class="justify-content-item " v-if="body.faqiren==1">
<tn-tag @click="editshow=true" shape="circle"
							backgroundColor="tn-main-gradient-aquablue--light"  height="34rpx" width="120rpx">
							编辑详情
</tn-tag>

<tn-tag  @click="del()" shape="circle"
							backgroundColor="tn-main-gradient-red--light"  height="34rpx" width="120rpx">
							删除组局
</tn-tag>

				</view>
			</view>
		</view>

		<view class="content-backgroup tn-margin">
			<mp-html :content="body.detail" />
		</view>
		<!-- 更多信息-->
		<view class=" tn-padding-bottom-sm">
			<tn-list-cell :hover="true" :unlined="true" :radius="true">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">线下活动费用</view>
					<view class="tn-margin-left-sm">{{body.paytype}}</view>
				
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">报名费用</view>
					<view class="tn-margin-left-sm" v-if="body.price>0">{{body.price}}{{configInfo.site_moneyname}}</view>
					<view class="tn-margin-left-sm" v-else>免费</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" v-if="body.price_dashang>0">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">报名成功打赏</view>
					<view class="tn-margin-left-sm" v-if="body.price_dashang>0">{{body.price_dashang}}{{configInfo.site_moneyname}}</view>
					<view class="tn-margin-left-sm" v-else>免费</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">活动人数</view>
					<view class="tn-margin-left-sm">{{body.num}}人</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">已报名</view>
					<view class="tn-margin-left-sm">{{body.num_join}}人</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">已参加</view>
					<view class="tn-margin-left-sm">{{body.cajiarenshu}}人</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">举办时间</view>
					<view class="tn-margin-left-sm">{{body.time}}</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" v-if="body.lat">
				<view class="tn-flex tn-flex-col-center"  @click="openLocation()">>
					<view class="tn-flex-1">举办地点</view>
					<view class="tn-margin-left-sm"><text class="tn-icon-location-fill" style="font-size: 50rpx;"></text>{{body.address}}</view>
				</view>
			</tn-list-cell>
			<tn-list-cell :hover="true" :unlined="true" :radius="true" v-if="body.daoijishi>0">
				<view class="tn-flex tn-flex-col-center">
					<view class="tn-flex-1">倒计时</view>
					<view class="tn-margin-left-sm">
						<tn-count-down :timestamp="body.daoijishi" :showBorder="true" separator="cn"></tn-count-down>
					</view>
				</view>
			</tn-list-cell>
		</view>






		<!-- 边距间隔 -->
		<view class="tn-strip-bottom"></view>



		<view class="">
			<view class="nav_title--wrap">
				<view class="nav_title tn-cool-bg-color-15">
					<text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
					<text class="tn-text-xl">已报名名单</text>
					<text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
				</view>
			</view>
		</view>

		<!-- 图文 -->
		<!-- 比例 start-->
		<view class="tn-flex tn-flex-wrap tn-margin-sm">
			<view class="" style="width: 50%;"
				@click="navigateToFn({ url: '/circleMixinPages/blogger_other?id='+userbody.id, checkLogin: false })">
				<view class="tn-blogger-content__wrap">
					<view class="image-picbook" :style="'background-image:url(' + userbody.avatar + ')'">
						<view class="image-book">
						</view>
					</view>

					<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
						<text class="tn-blogger-content__label__desc">{{ userbody.nickname }}</text>
					</view>

					<view
						class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">

						<view class="justify-content-item tn-text-center">
							<view
								class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
								<text class="tn-blogger-content__label__item--prefix">发起人</text>
							</view>
						</view>
					</view>


				</view>
			</view>
			<block v-for="(item, index) in join" :key="index">
				<view class="" style="width: 50%;"
					>
					<view class="tn-blogger-content__wrap">
						<view class="image-picbook" :style="'background-image:url(' + item.avatar + ')'" @click="navigateToFn({ url: '/circleMixinPages/blogger_other?id='+item.user_id, checkLogin: false })">
							<view class="image-book">
							</view>
						</view>

						<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
							<text class="tn-blogger-content__label__desc">{{ item.nickname }}</text>
						</view>

						<view
							class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">

							<view class="justify-content-item tn-text-center">
								<view
									class="tn-blogger-content__label__item tn-float-left tn-margin-right tn-bg-gray--light tn-round tn-text-sm tn-text-bold">
									<text class="tn-blogger-content__label__item--prefix">第{{index+1}}位</text>
								
								<block v-if="body.faqiren==1">
								<tn-button v-if="item.status==0" @tap="queren(item.id)" backgroundColor="tn-main-gradient-blue--light" padding="10rpx 20rpx" size="sm" shadow fontBold>
									<text class="tn-color-black">确 认</text>										
								</tn-button>
								<tn-button v-if="item.status==1"  backgroundColor="tn-main-gradient-blue--light" padding="10rpx 20rpx" size="sm" shadow fontBold>
									<text class="tn-color-black">已确认</text>										
								</tn-button>
								</block> 
								</view>
							</view>
						</view>


					</view>
				</view>
			</block>
		</view>
		<!-- 比例 end-->
		<view class="footerfixed tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm" v-if="!body.isbaoming&&body.faqiren==0">
			<tn-goods-nav :options="countOptions" :buttonGroups="customButtonGroups" buttonType="round"
				:safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
		</view>
		
		<view class="footerfixed tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm" v-if="body.isbaoming&&body.status==0&&body.faqiren==0">
			<tn-goods-nav :options="countOptions" :buttonGroups="customButtonGroupsd" buttonType="round"
				:safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
		</view>
		<view class="footerfixed tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm" v-if="body.faqiren==1">
			<tn-goods-nav :options="countOptions" :buttonGroups="customButtonGroupfaqi" buttonType="round"
				:safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
		</view>
		
		<view class="footerfixed tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm" v-if="body.isbaoming&&body.status==1&&body.faqiren==0">
			<tn-goods-nav :options="countOptions" :buttonGroups="customButtonGroups_queren" buttonType="round"
				:safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
		</view>
		
		
		
		
		
		<view class="tn-padding-xl tn-margin"></view>

		<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn>







		<tn-modal width="80%" v-model="show_shenqing" backgroundColor="#E4E9EC" padding="30rpx 20rpx" :radius="25"
			title="举报" :showCloseBtn="false"  :maskCloseable="true" :zoom="true" :custom="true">
					
			
			<view class="custom-modal-content tn-padding">
				报名后等待发起人确认，
				<text v-if="body.price>0">
				确认后才会扣除{{configInfo.site_moneyname}},请保持账户{{configInfo.site_moneyname}}不低于{{body.price}}个。</text>
			</view>
			<view class="tn-flex tn-footerfixed">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="baoming()">
					<tn-button :backgroundColor="configInfo.button" padding="40rpx 0" width="60%" shadow fontBold>
						<text class="tn-icon-edit tn-padding-right-xs tn-color-black"></text>
						<text class="tn-color-black">确 定 报 名</text>
			
					</tn-button>
				</view>
			</view>
		</tn-modal>



		<tn-modal width="80%" v-model="hexiao" backgroundColor="#ffffff" padding="30rpx 20rpx" :radius="25"
			title="设置" :showCloseBtn="false" :maskCloseable="true" :zoom="true" :custom="true">			
					
						<view >
							<view class="tn-padding" v-if="body.status!==3">
								<image :src="body.erweima" mode="widthFix" style="width:100%;"></image>
							</view>
							
							<view class="custom-modal-content ">
								<view class="tn-text-center " >
									  <tn-button :fontSize="28" padding="20rpx" height="56rpx" backgroundColor="#686868"
										fontColor="tn-color-white" @click="tuikuanreg()" v-if="body.status==0&&body.price>0">申请退款
										</tn-button>
										
										<view class="tn-padding" v-if="body.status==2">
											已申请退款，等待发起人确认
										</view>
										
										<view class="tn-padding" v-if="body.status==3">
											已同意退款，已原路返回
										</view>
										<view class="tn-padding" v-if="body.status==4">
											发起人不同意退款
										</view>
										<tn-button :fontSize="28" padding="20rpx" height="56rpx" backgroundColor="#00aaff"
											fontColor="tn-color-white" style="margin-left: 15px;" @click="call(userbody.mobile)">
											联系发起人
										</tn-button>
								</view>
							</view>
						</view>
					
				</tn-modal>


	<tn-popup v-model="editshow" width="80%" height="600rpx" mode="bottom" :borderRadius="30" :closeBtn="false"
			:maskCloseable="true">
<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;" >
			<textarea maxlength="500" placeholder="请填写自我介绍" v-model="detail"
				placeholder-style="color:#AAAAAA"></textarea>
		</view>
		
		<view class="tn-flex ">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="baocun()">
				
				<tn-button :blockRepeatClick="true" backgroundColor="tn-cool-bg-color-6" padding="40rpx 0"
					width="60%" shadow fontBold>
					<text class="tn-icon-success tn-padding-right-xs "></text>
					<text class="">保 存</text>
		
				</tn-button>
			</view>
		</view>
		
		
		</tn-popup>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
	import {
		render
	} from "vue"
	export default {
		name: 'TemplateProduct',
		mixins: [template_page_mixin],
		components: {
			NavIndexButton
		},
		data() {
			return {
				detail:'',
				editshow:false,
				hexiao:false,
				show_shenqing: false,
				custom: false,
				userbody: [],
				body: [],
				loginBoxFlag: false,
				cardCur: 0,
				swiperList: [],
				current: 0,
				fixedList: [],
				join: [],
				content: [],
				countOptions: [{
					icon: 'share-circle',
					text: '分享',
				}],
				
				customButtonGroupfaqi:[{
					text: '报名管理',
					backgroundColor: 'tn-cool-bg-color-16',
					color: '#FFFFFF'
				}, {
					text: '成员讨论群',
					backgroundColor: 'tn-cool-bg-color-8',
					color: '#FFFFFF'
				}],
				
				
				
				
				customButtonGroups: [{
					text: '我要报名',
					backgroundColor: 'tn-cool-bg-color-16',
					color: '#FFFFFF'
				}],
				customButtonGroupsd: [{
					text: '已报名，待确认',
					backgroundColor: 'tn-cool-bg-color-16',
					color: '#FFFFFF'
				}],
				customButtonGroups_queren: [{
					text: '已确认',
					backgroundColor: 'tn-cool-bg-color-16',
					color: '#FFFFFF'
				}, {
					text: '成员讨论群',
					backgroundColor: 'tn-cool-bg-color-8',
					color: '#FFFFFF'
				}],
				tagList: [],
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
			}

			let that = this
			this.info()
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});
			uni.$on('zujufabu', data => {
				that.mescroll.resetUpScroll()
			});		
		},
		methods: {
			
			del() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认要删除本组局吗?',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {								
						that.delzuju()
						} else if (res.cancel) {
							
						}
					}
				});
			},
			
			
			async delzuju() {
				let that = this;			
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/yuehui/delzuju',
					data: {
						id: this.id					
					}
				});			
				if (result.data.code == 200) {
					uni.showModal({
						title: '提示',
						showCancel:false,
						content: '删除成功',
						confirmText: '返回',
						success: function(res) {
							if (res.confirm) {								
							uni.navigateBack()
							} else if (res.cancel) {
								
							}
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: result.data.msg
					});
				}		
			},	
			async baocun() {
				let that = this;
				if (this.detail==''){
					this.msg('请填写详情')
					return
				}
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/yuehui/editzuju',
					data: {
						id: this.id,
						detail:this.detail
					}
				});			
				if (result.statusCode == 200) {
					this.editshow=false
					if (result.data.code == 200) {						
					this.msg('修改成功')
					this.info()			
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			
			},	
			async queren(id) {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/yuehui/quernpass',
					data: {
						id: id
					}
				});
			
				if (result.statusCode == 200) {
					if (result.data.code == 200) {				
					this.info()
			
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			
			},	
					
			closeGlobalLoginFn(){
				this.loginBoxFlag = false;
			},
			onButtonClick(e) {				
		
				if (!uni.getStorageSync('token')) {
					this.loginBoxFlag = true
					return false;
				}

				if (this.body.daoijishi < 0&&this.body.faqiren==0) {
					this.msg('已结束')
					return
				}


				if (e.index == 0) {					
					if (this.body.faqiren==1) {
					this.navigateToFn({ url: '/homeMixinPages/yaoyue/userlist?id='+this.id, checkLogin: true })
						return false;
					}				
					if (this.body.isbaoming&&this.body.status==0) {
						this.msg('已报名，等待确认')		
						return false;
					}
					if (this.body.isbaoming&&this.body.status==1) {
						this.msg('已确认')		
						return false;
					}
				
					
					if (this.body.price >= 0) {					
						this.show_shenqing = true
					}
				}
				if (e.index == 1) {
				
					 if (!this.body.isbaoming&&this.body.faqiren==0){
						this.msg('请先报名') 
					 }else{
						this.navigateToFn({ url: '/circleMixinPages/team/quan_chat?id='+this.id+'&type=yuehui&title='+this.body.detail, checkLogin: true })
					 }
				}
			},
			onOptionClick(e) {
				console.log(e)
			},
			
			showpic(img){
				uni.previewImage({
					current:img,
					urls: [img]
				});
			},			
		   
			call(mobile){
				uni.makePhoneCall({
				phoneNumber:mobile.toString()
				})
			},
					
			tuikuanreg(){
				this.hexiao=false
				let that = this;
				uni.showModal({
					title: '提示',
					content:'发起人同意后原路退款，确定要申请退款吗？',
					confirmText: '申请退款',				
					success: function(res) {
						if (res.confirm) {
							that.tuikuanpass()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},	
					
				
				async tuikuanpass() {
					let that = this;
					let result = await that.$request({
						loading: 0,
						method: 'post',
						url: '/chat/zuju/tuipass',
						data: {
							id: that.body.joinid
						}
					});
				
					if (result.statusCode == 200) {
						if (result.data.code == 200) {				
							uni.hideLoading()
							uni.showModal({
								title: '提示',
								content:'退款成功，等待发起人同意',
								confirmText: '知道了',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										that.info()
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
				
						} else {
							uni.showToast({
								icon: 'none',
								title: result.data.msg
							});
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: that.$errorMsg
						});
					}
				
				},	
										
						   
			async baoming() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/yuehui/joinZuju',
					data: {
						id: that.id
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
					this.show_shenqing=false
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: result.data.msg,
							confirmText: '知道了',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									that.info()
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

			},
			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/yuehui/getDetail',
					data: {
						id: that.id
					}
				});

				if (result.statusCode == 200) {
					that.body = result.data.data
					that.detail=that.body.detail
					that.tagList = that.body.images
					that.userbody = result.data.data.userInfo
					that.join = that.body.joinInfo
				}
				if (result.data.code==0){
					uni.showModal({
						title: '提示',
						showCancel:false,
						content:result.data.msg,
						confirmText: '返回',
						success: function(res) {
							if (res.confirm) {								
							uni.navigateBack()
							} else if (res.cancel) {
								
							}
						}
					});
				}
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			getRandomCoolBg() {
				return this.$tn.colorUtils.getRandomCoolBgClass()
			},
			openLocation() {
					  
					  if (this.body.lng){
			  uni.openLocation({
			    longitude: Number(this.body.lng),
			    latitude: Number(this.body.lat),
			    name: '活动举办地',
			    address:this.body.address
			  })
					}
					else{
						this.msg('未标注地图')
					}
					
			},

			async post(payType) {



				let that = this;
                let url = '/chat/zuju/pay';
				
				// #ifdef APP	
			  if (payType == 'alipay') {
			  	var fangshi = 'alipay';
			  } else {
			  	var fangshi = 'wxapp';
			  }
			  		
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: url,
					data: {
					id: that.id,
					pay_type:fangshi
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {

						uni.requestPayment({
							provider: payType,
							orderInfo: result.data.data, //支付宝订单数据
							success: function(res) {
								if (res.errMsg == 'requestPayment:ok') {
									that.info()
									//uni.navigateBack()
								} else {
									console.log('fail:' + JSON.stringify(res));
								}
							},
							fail: function(err) {
								console.log(err)
							}
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

				// #endif


				// #ifdef MP
				//微信小程序

				let result = await that.$request({
					loading: 1,
					method: 'post',
					url:url,
					data: {
					id: that.id,
					pay_type:'wxxcx'
					}
				});


				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						let paycanshu = JSON.parse(result.data.data.pay)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: paycanshu.timeStamp,
							nonceStr: paycanshu.nonceStr,
							package: paycanshu.package,
							signType: 'MD5',
							paySign: paycanshu.paySign,
							success: function(res) {
							that.info()
							},

						});
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

				// #endif

				// #ifdef H5
				//微信公众号

				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {} else {
					this.msg('请到微信里打开才能支付！复制网址到微信访问吧' + ua.match(/micromessenger/i))
					//return
				}

			let result = await that.$request({
				loading: 1,
				method: 'post',
				url:url,
				data: {
				id: that.id,
				pay_type:'wxh5'
				}
			});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						let paycanshu = result.data.data
						//、、、、、
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								"appId": paycanshu.appId, //公众号名称，由商户传入
								"timeStamp": paycanshu.timeStamp, //时间戳     
								"nonceStr": paycanshu.nonceStr, //随机串     
								"package": paycanshu.package,
								"signType": paycanshu.signType, //微信签名方式：     
								"paySign": paycanshu.paySign //微信签名 
							},
							function(ress) {
								if (ress.err_msg == "get_brand_wcpay_request:ok") {
								that.info()
								} else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
									uni.showToast({
										icon: "none",
										title: "'已取消支付"
									})
								} else {
									uni.showToast({
										icon: "none",
										title: "支付失败"
									})
								}
							}
						);
						//、、、

					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}

				// #endif

			},

		}
	}
</script>

<style lang="scss" scoped>
	/* 轮播视觉差 start */
	.card-swiper {
		height: 750rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		// padding: 0rpx 30rpx 90rpx 30rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -60rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: #FFFFFF;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/
	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: transparent;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 46rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
			background-size: cover;
		}
	}

	/* 标题 end */

	/* 底部tabbar start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	/* 内容图 start */
	.content-backgroup {
		z-index: -1;

		.backgroud-image {
			border-radius: 15rpx;
			width: 100%;
		}
	}

	/* 内容图 end */

	/* 文章内容 start*/
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #E83A30;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 30rpx;
			padding-right: 5rpx;
		}
	}

	.image-book {
		padding: 150rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-picbook {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	/* 文章内容 end*/
</style>